<template>
    <div class="about-us-container">
        <van-nav-bar title="关于我们" left-text="返回" @click-left="onClickLeft" left-arrow/>
        <van-empty v-if="!loaded" description="加载中..." />
        <div v-else class="content">
            <van-card class="story-card" title="我们的故事" :thumb="storyImage"
                desc="这里是关于我们公司的详细介绍，包括我们的使命、愿景以及我们如何一步步走到今天。" />
            <van-divider />
            <van-row class="team-row">
                <van-col v-for="member in teamMembers" :key="member.id" :span="8" class="team-member-col">
                    <van-cell title="姓名" :value="member.name + member.position" class="team-member-cell"
                        icon="person" />
                    <van-image class="team-member-image" fit="cover" :src="member.image" round />
                </van-col>
            </van-row>
        </div>
    </div>
</template>
<script setup>
import { ref, onMounted } from 'vue';

const loaded = ref(false);
const teamMembers = ref([
    { id: 1, name: '张三', position: 'CEO', image: 'path/to/zhangsan.jpg' },
    { id: 2, name: '李四', position: 'CTO', image: 'path/to/lisi.jpg' },
    // 更多团队成员...  
]);

const storyImage = 'path/to/company-story.jpg'; // 假设的故事图片路径  
onMounted(() => {
    // 模拟数据加载  
    setTimeout(() => {
        loaded.value = true;
    }, 1000); // 假设数据加载需要1秒  
});
const onClickLeft = () => history.back();
</script>
<style scoped>
.about-us-container {
    padding: 20px;
}
.content {
    margin-top: 20px;
}
.story-card {
   margin-bottom: 20px;
}
.team-row {
    justify-content: space-around;
}
.team-member-col {
    text-align: center;
    margin-bottom: 20px;
}
.team-member-cell {
    margin-bottom: 10px;
}
.team-member-image {
    width: 100px;
    height: 100px;
    margin: 0 auto;
    border-radius: 50%;
    overflow: hidden;
}
</style>